<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 
        需求：当input失去焦点的时候，我就打印出input的值

        问题：如何获取到input这个事件对象呢？（之前遇到过类似的问题吗？）
            嗯，要获得某个事件点击的对象时，使用event.target可以获取到。（注：event.target获得的是真实节点）

        问题：如何得到input的值呢？
              event.target.value

       -->
    <input type="text" v-on:blur="logValue">

    <br>

    <!-- 

      需求：点击不同的button按钮获得不同传值效果
      分析：addCount的调用情况，只在点击时被调用


     -->

    <h2>count:{{count}}</h2>
    <button @click="addCount(1)">点击+1</button>
    <button @click="addCount(2)">点击+2</button>
    <button @click="addCount(3)">点击+3</button>
  </div>
</body>
<script>

  Vue.config.productionTip = false; // 解决警告信息的

  const vm = new Vue({
    el: "#app",
    data() {
      return {
        count: 0,

      };
    },

    methods: {
      logValue(e) {

        console.log(e.target.value)

        /*
          在vue中默认，事件函数接收的第一个参数为event事件对象，可以直接使用，不用传参
      
        */
      },

      addCount(n) {

        this.count += n;
        console.log(this.count);


      }
    },
  });
</script>


</html>